// 试题预览对话框
<template>
  <div class='QuestionsPreview'>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :destroy-on-close="true">
      <el-row>
        <el-col :span="6">【题型】：{{questionTypeObj[questionInfo.questionType]}}</el-col>
        <el-col :span="6">【编号】：{{questionInfo.id}}</el-col>
        <el-col :span="6">【难度】：{{difficultyObj[questionInfo.difficulty]}}</el-col>
        <el-col :span="6">【标签】：{{questionInfo.tags}}</el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="6">【学科】：{{questionInfo.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{questionInfo.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{questionInfo.direction}}</el-col>
      </el-row>
      <hr style="margin-top:15px">
      <p>【题干】：</p>
      <p style="color:blue" v-html="questionInfo.question"></p>
      <div v-if="questionInfo.questionType==='2'">
        <p>多选题 选项：（以下选中的为正确答案）</p>
        <div class="questionOptions">
          <el-checkbox v-for="obj in questionInfo.options" :key="obj.id" :label="obj.title" :value="obj.isRight?true:false" style="width:100%;height:30px"></el-checkbox>
        </div>
      </div>
      <div v-if="questionInfo.questionType==='1'">
        <p>单选题 选项：（以下选中的为正确答案）</p>
        <div class="questionOptions">
          <!-- label的值必须是1或者2 要和value的返回值一致isRight返回值是0,1 -->
          <el-radio v-for="obj in questionInfo.options" :key="obj.id" :label="1" :value="obj.isRight" style="width:100%;height:30px">{{obj.title}}</el-radio>
        </div>
      </div>
      <hr>
      <div class="questionAnswer">
        <p>【参考答案】：<el-button type="danger" @click="videoVisible=true">视频答案预览</el-button>
        </p>
        <div>
          <video :src="questionInfo.videoURL" style="width:80%" v-show="videoVisible" controls></video>
        </div>
      </div>
      <hr>
      <div>【答案解析】：<div style="display:inline-block" v-html="questionInfo.answer"></div>
      </div>
      <hr>
      <p>【题目备注】：{{questionInfo.remarks}}</p>
      <br>
      <div style="text-align:center">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'QuestionsPreview',
  data () {
    return {
      // 控制开启和关闭的状态位
      dialogVisible: false,
      // questionInfo: {},
      difficultyObj: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      questionTypeObj: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 控制视频组件
      videoVisible: false
    }
  },
  // 接收父组件传递过来的数据
  props: {
    // value这个名字和属性名对应
    questionInfo: {
      type: Object
    }
  }
}
</script>

<style scoped lang='less'>
.QuestionsPreview {
  /deep/ .el-dialog {
    width: 1200px;
  }
}
</style>
